<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="景点名称" prop="name" />
        <el-table-column label="景点等级" prop="level" />
        <el-table-column label="景点地址" prop="address" />
        <el-table-column label="景区联系方式" prop="phone" />
        <el-table-column label="详情">
            <template #default="scope">
                <el-button size="small" type="success" @click="QueryInfo(scope.$index, scope.row)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="查询" />
            </template>
        </el-table-column>
    </el-table>
    <el-drawer v-model="drawer" title="景区详情" :with-header="false">
        <span style="font-size: x-large; font-weight: bold; text-align: center; display:block;">景区详情</span>
        <div style="margin: 10px 0px 50px;">
            <img :src="img_path" style="height: 60%;width: 100%; " />
        </div>

        <el-input v-model="from" style="width: 200px;" placeholder="请输入起点" id="from"></el-input>
        <span style="margin-top: 100px;">到</span>
        <span style="margin-top: 100px;">{{ name }}</span>
        <el-button type="primary" round @click="drivingplan">规划路线</el-button>
        <div id="map-container"></div>
    </el-drawer>
</template>
  
<script>
import { getRequest } from '../../../api/axiosAPI'

//地图需要
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: "7eea05230b25b9d7f5c7fea0075f67f3",
};


export default {
    setup() {

    },
    mounted() {

        getRequest('http://localhost:8022/scenic')
            .then((response) => {
                if (response.status === 200) {
                    console.log('获取景点信息')
                    console.log(response.data.data)
                    let tempData = response.data.data
                    for (let i = 0; i < tempData.length; i++) {
                        this.tableData[i] = {
                            name: tempData[i].name,
                            info: tempData[i].info,
                            img_path: tempData[i].imgPath,
                            level: tempData[i].level,
                            phone: tempData[i].phone,
                            address: tempData[i].address,
                            longitude: tempData[i].longitude,
                            latitude: tempData[i].latitude,
                        }
                    }
                }
                else {
                    console.log('Network Error!')
                }
            })
            .catch((error) => {
                console.log(error)
            })


    },
    data() {
        return {
            img_path: '', 
            info: '',
            drawer: false,
            search: '',
            name: '',
            tableData: [
            ],
            maplatitude: '',
            maplongitude: '',
            //地图需要
            from: "",
            map: null,// 
            lnglat: [], // 经纬度数组 [lng,lat] 
            auto: null,
            laceSearch: null,
            markers: [],
            driving: null,
        };
    },
    computed: {
        filterTableData() {
            return this.tableData.filter(
                (data) =>
                    !this.search ||
                    data.level.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.phone.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.address.toLowerCase().includes(this.search.toLowerCase()) ||
                    data.name.toLowerCase().includes(this.search.toLowerCase())
            )

        }
    },
    methods: {
        QueryInfo(index, row) {
            this.drawer = true
            this.img_path = row.img_path
            this.info = row.info
            this.name = row.name
            this.maplatitude = row.latitude
            this.maplongitude = row.longitude
            this.initMap()
        },
        initMap() {
            AMapLoader.reset()
            AMapLoader.load({
                key: "9ac3e72b68d6e4f4c4e21c9d196efec8", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
            /**
             * 这段代码是使用高德地图JavaScript API加载器（AMapLoader）的示例，它的作用是异步加载指定版本的高德地图API以及所需的插件，并配置Web端开发者Key。
                具体来说：key: "9ac3e72b68d6e4f4c4e21c9d196efec8"：这是在高德地图开放平台注册并申请得到的Web端API Key。调用高德地图服务时必须提供正确的Key，否则无法正常使用地图功能。
                version: "2.0"：指定了要加载的高德地图JSAPI的版本号。通过这个参数可以控制加载哪个版本的地图API，这里设置为2.0版。
                plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"]：列出了需要加载和使用的高德地图插件列表。例如，"AMap.AutoComplete"是地址自动补全插件，"AMap.PlaceSearch"用于地点搜索，"AMap.Driving"提供驾车路径规划，"AMap.DragRoute"则支持拖拽路线规划等高级功能。
                当调用AMapLoader.load()方法后，它会按需加载指定版本的地图API及其插件，加载成功后通常会执行一个回调函数来初始化地图及相应的插件功能。
             */
                .then((AMap) => {
                    console.log(AMap);
                    this.map = new AMap.Map("map-container", {
                        viewMode: "2D", //  是否为3D地图模式
                        zoom: 13, // 初始化地图级别
                        center: [this.maplongitude, this.maplatitude], //中心点坐标
                        resizeEnable: true,
                    });
                    this.map.on("click", this.clickMapHandler)
                    // this.drivingMap()
                    // this.drivingMap2()
                    // this.mapDragRoute()
                    // this.searchMap()

                })
                .catch((e) => {
                    console.log(e);
                });
        },
        // 点击地图事件获取经纬度，并添加标记
        clickMapHandler(e) {
            this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
            this.setMarker(this.lnglat);
        },
        //  添加标记
        setMarker(lnglat) {
            console.log("位置", lnglat); // lnglat=[经度,纬度]
            let marker = new AMap.Marker({
                position: lnglat,
            });
            marker.setMap(this.map);
            this.markers.push(marker); // 在data中记录标记点
        },
        // 删除之前后的标记点
        removeMarker() {
            // 判断是否存被标记的点，有--->移除
            if (this.markers) {
                this.map.remove(this.markers);
            }
        },
        drivingplan() {
            var start = this.from
            var end = this.name
            console.log(start, end)
            this.drivingMapPanle(start, end)
        },

        //构造路线导航类，据起终点经纬度规划驾车导航路线
        drivingMapPanle(start, end) {

            //  配置参数
            var drivingOption = {
                policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
                ferry: 1, // 是否可以使用轮渡
                province: "湘", // 车牌省份的汉字缩写
                map: this.map,
            };
            // 构造路线导航类
            if (this.driving) {
                this.driving.clear()
            }
            this.driving = new AMap.Driving(drivingOption);
            // 根据起终点经纬度规划驾车导航路线
            // var start = new AMap.LngLat(116.379028, 39.865042)
            // var end = new AMap.LngLat(116.427281, 39.903719)
            this.driving.search(
                // start , end , 
                // [{keyword: '北京市地震局(公交站)'},
                //  {keyword: '亦庄文化园(地铁站)'}],
                [{ keyword: start },
                { keyword: end }],
                function (status, result) {
                    if (status === "complete") {
                        console.log("绘制驾车路线完成");
                    } else {
                        console.log("获取驾车数据失败：" + result);
                    }
                });
        },
    }
}



</script>
<style scoped>
#map-container {
    overflow: hidden;
    width: 100%;
    height: 50%;
    margin: 0;
}
</style>